import React, {lazy, Suspense} from 'react';
import './App.css'
import {unstable_HistoryRouter as HistoryRouter, Routes, Route} from 'react-router-dom'
// import Login from "@/pages/Login";
// import Layout from "@/pages/Layout";
import AuthComponent from "@/components/AuthComponent";
// import Publish from "@/pages/Publish";
// import Home from "@/pages/Home";
// import Article from "@/pages/Article";
import history from "@/utils/history";

//按需导入
const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))
const Home = lazy(() => import('./pages/Home'))
const Article = lazy(() => import('./pages/Article'))
const Publish = lazy(() => import('./pages/Publish'))

const App = () => {
    return (
        <HistoryRouter history={history}>
            <div className='App'>
                <Suspense
                    fallback={
                        <div
                            style={{
                                textAlign: 'center',
                                marginTop: 200
                            }}
                        >
                            loading...
                        </div>
                    }
                >
                    <Routes>
                        {/*<Layout/>需要鉴权*/}
                        {/*<Layout/>要根据是否登录进行判断*/}
                        <Route path={"/"}
                               element={
                                   <AuthComponent>
                                       <Layout/>
                                   </AuthComponent>}
                        >
                            <Route index element={<Home/>}/>
                            <Route path={"/article"} element={<Article/>}/>
                            <Route path={"/publish"} element={<Publish/>}/>
                        </Route>
                        <Route path={"/login"} element={<Login/>}/>
                    </Routes>
                </Suspense>
            </div>
        </HistoryRouter>
    );
};

export default App;